<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-remove="handleRemoveTab" @tab-click="handleClickTab">
      <!-- ---------------------------------入库管理选项卡----------------------------------------- -->
      <el-tab-pane label="预出库管理" name="1">
        <content-left v-if="activeName == '1'" @click_create_receptiondate="handleReceptiondate"
          @click_create_createitem="handleCreateCreateitem" />
      </el-tab-pane>
      <!-- ---------------------------------入库记录选项卡----------------------------------------- -->
      <el-tab-pane label="出库管理" name="2">
        <content-center v-if="activeName == '2'" @click_create_receptiondate="handleReceptiondate" />
      </el-tab-pane>
      <el-tab-pane label="出库记录" name="3">
        <content-right v-if="activeName == '3'" @click_create_receptiondate="handleReceptiondate" />
      </el-tab-pane>
      <!-- ---------------------------------采购单详情选项卡----------------------------------------- -->
      <el-tab-pane v-if="flag" closable label="出库单详情" name="4">
        <content-detail v-if="activeName == '4'" :parentid="consumableBaseId" />
      </el-tab-pane>
      <!-----------------------------------开出库单选项卡--------------------------------------  -->
      <el-tab-pane v-if="applyFlag" closable :label="paneTitle" name="5">
        <content-detail-form ref="detailForm" v-if="activeName == '5'" @form_submit_click="handleSubmitForm" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import contentLeft from './contener-left'
import contentCenter from './contener-center'
import contentRight from './contener-right'
import contentDetail from './contener-detail'
import contentDetailForm from './contener-form'
export default {
  name: 'ItemList',
  components: {
    contentLeft,
    contentDetail,
    contentCenter,
    contentDetailForm,
    contentRight
  },
  data () {
    return {
      activeName: '1',
      activeNameClick: '1',
      flag: false,
      applyFlag: false,
      consumableBaseId: '',//采购详情 ID
      paneTitle: '开出库单',
    }
  },
  methods: {
    handleRemoveTab (val) {
      if (val == 4) {
        this.flag = false
      } else if (val == 5) {
        this.applyFlag = false
        this.activeName = '2'
      }
      this.activeName = this.activeNameClick
    },
    // 接收子级传上来的 采购详情 ID,打开采购详情
    handleReceptiondate (id) {
      this.flag = true
      this.activeName = '4'
      this.consumableBaseId = id * 1
    },
    // 点击tab标签
    handleClickTab (val) {
      if (val.name == '4' || val.name == '5') {
        return
      } else {
        this.activeNameClick = val.name
      }
      this.flag = false,
        this.applyFlag = false
    },
    handleCreateCreateitem (id) {
      if (id) {
        this.paneTitle = "修改出库单"
        this.applyFlag = true
        this.activeName = '5'
        this.$nextTick(() => {
          this.$refs['detailForm'].refelist(id)
        })
      } else {
        this.applyFlag = true
        this.activeName = '5'
        this.paneTitle = "开出库单"
      }
    },
    // 添加 采购品提交完成和取消事件
    handleSubmitForm () {
      this.applyFlag = false
      this.activeName = '1'
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__content {
  padding: 0;
}
</style>
